<!-- src/components/Dashboard.vue -->
<template>
  <div class="dashboard">
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon users">
          <i class="icon-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalStudents || 0 }}</div>
          <div class="stat-label">总学员数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon teachers">
          <i class="icon-user-check"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalTeachers || 0 }}</div>
          <div class="stat-label">总教师数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon courses">
          <i class="icon-book"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalCourses || 0 }}</div>
          <div class="stat-label">总课程数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon sessions">
          <i class="icon-calendar"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalSessions || 0 }}</div>
          <div class="stat-label">总授课场次</div>
        </div>
      </div>
    </div>

    <div class="charts-section">
      <div class="chart-card">
        <h3>数据概览</h3>
        <div class="chart-placeholder">
          <p>图表区域 - 可集成 Chart.js 或 ECharts</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { studentAPI, teacherAPI, courseAPI } from '@/services/api'

// 定义统计数据对象，初始值为 0
const statistics = ref({
  totalStudents: 0,
  totalTeachers: 0,
  totalCourses: 0,
  totalSessions: 0
})

// 获取统计数据的异步函数
const fetchStatistics = async () => {
  try {
    // 获取各类统计数据
    const [studentsRes, teachersRes, coursesRes] = await Promise.all([
      studentAPI.getStudents({ limit: 1 }),
      teacherAPI.getTeachers({ limit: 1 }),
      courseAPI.getCourseStatistics()
    ])
    
    statistics.value = {
      totalStudents: studentsRes.total,
      totalTeachers: teachersRes.total,
      totalCourses: coursesRes.total_courses || 0,
      totalSessions: coursesRes.total_sessions || 0
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  fetchStatistics()
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.stat-icon.users { background: #4F46E5; }
.stat-icon.teachers { background: #10B981; }
.stat-icon.courses { background: #F59E0B; }
.stat-icon.sessions { background: #EF4444; }

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #1F2937;
}

.stat-label {
  color: #6B7280;
  font-size: 14px;
  margin-top: 4px;
}

.charts-section {
  display: grid;
  gap: 20px;
}

.chart-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-card h3 {
  margin: 0 0 20px 0;
  color: #1F2937;
}

.chart-placeholder {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F9FAFB;
  border-radius: 6px;
  color: #6B7280;
}
</style>